<template>
    <div class="main">
        <p class="title">账号密码登录</p>
        <p class="tips">为了您的账号安全，请用手机号登录</p>
        <van-field v-model="tel" placeholder="请输入手机号" ref="iphone" class="input" type="tel" label="中国 +86" />
        <van-field v-model="password" placeholder="请输入密码" ref="password" type="password" class="input" />
        <van-button type="primary" class="button" @click="login">登录</van-button>
        <div class="check">
            <div class="check-left">
                <span>验证码登录</span>
            </div>
            <div class="check-right">
                <span>忘记密码</span> | <span>免费注册</span>
            </div>
        </div>
        <transition name="van-fade">
            <div class="mask" v-show="visible">
                <p>{{tip}}</p>
            </div>
        </transition>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tel: '',
            password: "",
            primary: "",
            visible: false,
            tip: ""
        }
    },
    methods: {
        login() {
            this.request({
                method: "post",
                url: "/user/m/login",
                data: {
                    mobile: this.$refs.iphone.value,
                    deviceId: "16643309625809817195",
                    deviceName: "PC",
                    pwd: this.$refs.password.value
                }
            }).then(res => {
                window.localStorage.setItem("token", res.data.token)
                this.$router.push("/home")
            }).catch(err => {
                this.visible = true
                this.tip = err
                setTimeout(() => {
                    this.visible = false
                }, 800)
            })
        }
    }
}
</script>

<style scoped>
/* 设置持续时间和动画函数 */
.v-enter-active,
.v-leave-active {
    transition: all .8s ease;
}

/* .v-enter,
.v-leave-to {
    opacity: 0;
}
 */

.main {
    padding: 0 1.2rem;
    position: relative;
}

.title {
    font-size: .96rem;
    margin-top: 1.6rem;
    font-weight: 700;
}

.tips {
    font-size: .56rem;
    color: #dcdee0;
    margin-top: .8rem;
}

.input {
    height: 2.18rem;
    border-bottom: 1px solid #f2f3f5;
    padding: .8rem 0 .4rem;
    font-size: .56rem;
}

.button {
    height: 1.72rem;
    width: 100%;
    margin-top: 1.24rem;
    font-size: .56rem;
}

.check {
    font-size: .48rem;
    display: flex;
    justify-content: space-between;
    padding: .8rem 0;
}

.check span {
    color: #38f;
}

.mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .56rem;
    border-radius: .2rem;
    padding: .32rem .48rem;
    box-sizing: border-box;
}
</style>